<template>

  <div class="re-com">
      <el-form ref="withdrawalFrom" :model="withdrawalFrom" label-width="120px" :rules="withdrawalRules">
        <el-form-item label="选择银行卡" prop="cardNumber">
          <el-select v-model="withdrawalFrom.cardNumber" placeholder="请选择你的银行卡">
            <el-option
              v-for="(item,i) in bindBankList"
              :key="i"
              :label="item.bank+' '+item.bankCardNumber"
              :value="item.bankCardNumber">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现金额(元)" prop="amount">
          <el-input v-model="withdrawalFrom.amount"></el-input>
        </el-form-item>
        <el-form-item label="支付密码" prop="payPwd">
          <el-input type="password" v-model="withdrawalFrom.payPwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提现</el-button>
        </el-form-item>
      </el-form>
  </div>

</template>

<script>
  import {findIsBindingCard} from "@/api/bindding";
  import {withdrawal} from "@/api/account";

  export default {
    name: "index",
    data() {
      var moneyReg = (rule,value,callback) => {
        if(value.length > 10){
          callback(new Error('长度在 0 到 10 个字符'));
        }else{
          setTimeout(() => {
            if (!/^\d+[.]?\d{0,2}$/.test(value) && value){
              callback(new Error('请输入正整数或小数保留两位小数'));
            }else{
              callback()
            }
          }, 500);
        }

      };
      return {
        withdrawalFrom: {
          cardNumber: '',
          amount: '',
          payPwd: ''
        },
        withdrawalRules:{
          cardNumber: [
            {required: true, trigger: "blur", message: "请选择您的银行卡号"}
          ],
          amount: [
            {required: true, trigger: "blur", validator: moneyReg},
          ],
          payPwd: [
            {required: true, trigger: "blur", message: "请选择您的支付密码"}
          ],
        },
        bindBankList:[

        ]
      }
    },
    created() {
      this.findBindCardList3();
    },
    methods: {
      onSubmit() {
        this.$refs.withdrawalFrom.validate(valid=>{
          if(valid){
            this.$alert('<p>是否确认充值</p>' +
                '<p>银行卡号：'+this.withdrawalFrom.cardNumber+'</p>' +
                '<p>提现金额：'+this.withdrawalFrom.amount+'</p>'
                ,'提现',{
                  dangerouslyUseHTMLString: true,
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                }).then(()=>{
              const req = {
                userId:this.$store.state.user.userInfo.userId,
                bank_card_number:this.withdrawalFrom.cardNumber,
                balance:this.withdrawalFrom.amount,
                password:this.withdrawalFrom.payPwd
              }
              console.log(req);
              withdrawal(req).then(res=>{
                this.$message({
                  message: res.content,
                  type: 'success'
                })
                this.$router.push('/home');
              })
            }).catch(()=>{
              this.$message({
                type: 'info',
                message: '取消提交'
              });
            });

          }
        })
      },
      //获取已绑定的银行卡
      findBindCardList3(){
        const userId = this.$store.state.user.userInfo.userId;
        findIsBindingCard(userId).then(res=>{
          this.bindBankList = res.content;
        })
      },
    }
  }
</script>

<style scoped>
.re-com{
  /*text-align: center;*/
  margin: 130px auto;
  width: 500px;
}

.card-box{
  width: 500px;
  margin: 20px 380px;
}
</style>
